<template>
  <div class="app-container">
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="channelName">
        <el-input
          v-model="list.filter.channelName"
          placeholder="渠道名称"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>
      <el-form-item prop="channelType">
        <KiSelect
          placeholder="渠道类型"
          v-model="list.filter.channelType"
          :options="options.channelType"
        />
      </el-form-item>
      <el-form-item prop="status">
        <KiSelect
          :index.sync="list.filter.status"
          :options="['停用', '启用']"
          placeholder="渠道状态"
        />
      </el-form-item>
      <el-form-item prop="authStatus">
        <KiSelect
          placeholder="授权状态"
          v-model="list.filter.authStatus"
          :options="options.authStatus"
          :props="{
            value: 'value',
            label: 'text'
          }"
        />
      </el-form-item>
      <el-button @click="reset">重置</el-button>
    </el-form>

    <div class="table-operation">
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column label="渠道id" prop="channelId" />
      <el-table-column label="渠道名称" prop="channelName" />
      <el-table-column label="渠道类型">
        <template slot-scope="{ row: { channelType } }">
          {{ channelType | $value2label(options.channelType) }}
        </template>
      </el-table-column>
      <el-table-column label="渠道状态" align="center">
        <template slot-scope="{ row: { status } }">
          <el-tag type="success" v-if="status === 1">启用</el-tag>
          <el-tag type="info" v-else-if="status === 0">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="授权状态" prop="authStatus">
        <template slot-scope="{ row: { channelId, authStatus, status } }">
          <KiPopSwitch
            v-bind="popSwitchPropsForAuthStatus(authStatus, status)"
            @change="updateAuthStatus({ channelId, authStatus })"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" v-if="$attrs.status === 'u'">
        <template slot-scope="{ row: { status, channelId, authStatus } }">
          <KiPopButton
            v-if="
              hasBtn['授权'] && status === 1 && authStatus === 0
            "
            @click="authChannel(channelId)"
            :elPopconfirmProps="{
              title: '确认授权？'
            }"
          >
            授权
          </KiPopButton>
          <KiPopButton
            v-if="hasBtn['取消授权'] && authStatus === 1"
            @click="cancelAuthChannel(channelId)"
            :elPopconfirmProps="{
              title: '确认取消授权？'
            }"
          >
            取消授权
          </KiPopButton>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'

export default {
  mixins: [pageMixin],
  setup: (props, { attrs }) =>
    useAdmateAdapter({
      urlPrefix: 'sot-admin-api/scenic/scenic-channel',
      list: {
        filter: {
          scenicId: attrs.scenicId
        }
      }
    }),
  data () {
    return {
      options: {
        channelType: [
          { dataValue: 1, dataName: '自有渠道' },
          { dataValue: 2, dataName: '平台渠道' }
        ],
        authStatus: ['未授权', '已授权'],
        authStatusBtn: ['取消授权', '授权']
      },
      untouched: true,
      popSwitchPropsForAuthStatus: (authStatus, status) => ({
        value: authStatus,
        elTooltipProps: { content: `${this.options.status[authStatus]}` },
        ...(this.hasBtn[
          this.options.authStatusBtn[authStatus ^ 1]
        ]
          ? status === 0 && authStatus === 0
            ? {
                disabled: true,
                elPopoverProps: {
                  content: `<i class='el-icon-warning'/> 停用状态无法授权`
                }
              }
            : {
                elPopconfirmProps: {
                  title: `确认${this.options.authStatusBtn[authStatus ^ 1]}吗？`
                }
              }
          : {
              disabled: true,
              elPopoverProps: {
                content: `<i class='el-icon-warning'/> 权限不足`
              }
            })
      })
    }
  },
  methods: {
    updateAuthStatus ({ channelId, authStatus }) {
      if (authStatus === 0) {
        this.authChannel(channelId)
      } else if (authStatus === 1) {
        this.cancelAuthChannel(channelId)
      }
    },
    authChannel (channelId) {
      this.$POST('sot-admin-api/scenic/scenic-channel/authChannel', {
        channelId,
        scenicId: this.$attrs.scenicId
      }).then(() => {
        this.untouched = false
        this.getList()
        this.success__()
      })
    },
    cancelAuthChannel (channelId) {
      this.$POST('sot-admin-api/scenic/scenic-channel/cancelAuthChannel', {
        channelId,
        scenicId: this.$attrs.scenicId
      }).then(() => {
        this.untouched = false
        this.getList()
        this.success__()
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
